<template>
  <div> 
    <!-- <so-header :seller="headerTitle"></so-header> -->
    <setHeader :title="headerTitle"></setHeader>
    <div class="pagecontent">
        <!-- 个人头像 -->
        <div class="title_text_more main-people-img" prop="logImg">
          <h3>个人头像：</h3>
          <span class="avatar_head">
            <img v-if="userhead" :src="userhead">
          </span>
        </div>        
        <!-- 资料 -->
         <div class="infoDiv">
            
            <mt-field label="职位：" v-model="username" disabled v-if="au_show"></mt-field>
            <mt-field label="职位：" v-model="username" disabled @click.native="showCompanyList"  @mousedown="showPicker" v-if="au_shows"><span><i class="iconfont icon-shixinxiajiantou"></i></span></mt-field>
            <mt-field label="电话号码：" v-model="tel" :attr="{ maxlength: 11 }" disabled></mt-field>
            <mt-field label="电子邮箱：" v-model="email" disabled></mt-field>
            <mt-field label="申请" v-model="applyInfo" v-show="applyInfoFlag" disabled>{{applyInfo}}</mt-field>
            <!-- <mt-field label="地区：" v-model="region" disabled></mt-field> -->
         </div>
    </div>

    <!-- <mt-cell title="头像">
      <span><img slot="icon" :src="userhead" width="45" height="45" class="headImg"></span>
    </mt-cell>
    <div class="infoDiv">
      <mt-field label="地区" v-model="region"></mt-field>
      <mt-field label="姓名" v-model="username" disabled></mt-field>
      <mt-field label="职位" v-model="job" disabled></mt-field>
      <mt-field label="电话" v-model="tel" disabled></mt-field>
      <mt-field label="邮箱" v-model="email" disabled></mt-field>
      <mt-field label="申请" type="textarea" rows="4" v-modal="applyInfo" v-show="applyInfoFlag" disabled>{{applyInfo}}</mt-field>
    </div> -->
    <mt-popup
            v-model="popupVisible"
            position="bottom">
        <ul> 
            <li style="text-align: left;" :style="list.style" v-for="list in UcompanyList" @click="JoinCompany(list.name,list.id)" :key="list.id">{{list.name}}</li>
        </ul>
        </mt-popup>
  </div>

</template>

<script>
import setHeader from '../public/setHeader.vue';
import { MessageBox } from 'mint-ui';

  export default {
    data() {
      return {
        headerTitle:'同事资料',
        userInfo:'',
        region:'',
        // userhead: '',
        username:'',
        job:'',
        tel:'',
        email:'',
        applyInfo: '',
        cp_id:'',
        lookUid: '',
        checkFlag: '',
        applyInfoFlag: false,

        logImgPath: '',
        userhead: this.$path+'',
        importFileUrl:this.$path+'/api.php/upload/upimage',

        UcompanyList:[],
        popupVisible:false,
        au_show:true,
        au_shows:false,

        admin:'',
      };
    },
    components:{
      setHeader,
    },
    created() {
        let that = this;
        that.userInfo = JSON.parse(window.localStorage.getItem('userInfo'));
        this.cp_id = this.$route.query.cp_id
        this.lookUid = this.$route.query.lookUid
        this.checkFlag = this.$route.query.checkFlag
        //检测当前用户是否为当前企业的管理员
        this.checkAdmin();
        that.lookInfo();
    },
    mounted() {
      
    },
    methods: {

      lookInfo(msg){
        var cp_id = this.cp_id
        var lookUid = this.lookUid
        this.$fetch(this.$path+ '/api.php/company/getColleagueInfo', {cp_id,lookUid}).then((response) => {
          console.log('999',response);
          if(response.code == 200 ){
            this.username = response.data.architeName
            this.job = response.data.job
            this.tel = response.data.mobile
            this.email = response.data.usermail?response.data.usermail:'—'
            this.userhead = response.data.userhead
            if(this.checkFlag == 1){//创建者身份
              this.applyInfo = response.data.apply_info
              this.applyInfoFlag = true
              //获取当前所有职位
              this.getAuthriList();
              this.au_show = false;
              this.au_shows = true;
            }
          }
        })
      },
      // 头像begin
      handleAvatarSuccessTwo(res, file) {
        this.logImgPath = res.headpath;
        this.userhead = URL.createObjectURL(file.raw);
        console.log(this.logImgPath);
      },
      beforeAvatarUploadTwo(file) {
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG && !isPNG) {
          this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
          return false;
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
          return false;
        }
      },
      //检测当前用户是否为当期企业的管理员
      checkAdmin(){
        let uid = this.userInfo.uid;
        let cpId = this.cp_id;
        this.$fetch(
          this.$path+'/api.php/company/checkAdmin',{uid,cpId})
          .then((res) => {
              console.log('企业权限', res);
                if(res.code == 200) {
                  this.admin = true;
                }else{
                  this.admin = false;
                }
          })
      },
      //获取当前企业的所有职位信息
        getAuthriList:function(){
            let that = this;
            // let company_id = that.userInfo.company_id;
            // console.log('company_id', company_id);
            this.$post(
                that.$path+'/api.php/company/getCompanyAuthi',{cp_id:that.cp_id,access_token:that.access_token})
                .then((res) => {
                    console.log('企业职位', res);
                      if(res.code == 200) {
                        let count = res.data.length;
                        if(count == 1){
                            that.showss = true;
                            that.architeName= res.data[0].name;
                            that.company_id = res.data[0].id;
                        }else{
                            that.architeNames= '请点击选择职位';
                            that.showss = false;
                            that.showsss = true;
                            that.UcompanyList = res.data;
                            that.UcompanyList.forEach((element,index) => {
                                if(element.level == 1) {
                                    that.UcompanyList[index].style = 'padding-left: 0.2rem';
                                }else if(element.level == 2){
                                    that.UcompanyList[index].style = 'padding-left: 0.6rem';
                                }else if(element.level == 3){
                                    that.UcompanyList[index].style = 'padding-left: 1rem';
                                }
                            });
                        }                        
                      }
            })
        },
        //点击选择职业
        showCompanyList:function(){
          if(this.admi == false){
            return ;
          }else{
            this.popupVisible = true;
          }
          console.log(155);
            
        },
        showPicker(e){
            e.preventDefault(); //阻止输入法的唤醒
        },
        JoinCompany:function(name,id){
          let that = this;
                
                var lookUid = that.lookUid
                console.log(lookUid);
                //更新员工的职位
                this.$post(
                that.$path+'/api.php/company/updateUserAuthi',{cp_id:that.cp_id,access_token:that.access_token,userId:lookUid,architeName:name,architeId:id})
                .then((res) => {
                    console.log('企业职位', res);return false;
                      if(res.code == 200) {
                        let count = res.data.length;
                        if(count == 1){
                            that.showss = true;
                            that.architeName= res.data[0].name;
                            that.company_id = res.data[0].id;
                        }else{
                            that.architeNames= '请点击选择职位';
                            that.showss = false;
                            that.showsss = true;
                            that.UcompanyList = res.data;
                        }                        
                      }
                })
                this.username= name;
              
                this.popupVisible = false;
        },

    }
  }

</script>
<style>

/* 职位下拉箭头 */
.infoDiv .icon-shixinxiajiantou {
    padding: 0 0.2rem;
    color: #999;
    font-size: 0.28rem;
}

/* 个人头像 */
.main-people-img {
  height: 1rem !important;
  line-height: 1rem !important;
  margin-bottom: 0.2rem;
  padding-top: 0.1rem;
}
.main-people-img h3{
  font-size: 0.28rem;
  color: #333;
  font-weight: 500;
}
.avatar_head {
  width: 0.8rem;
  height: 0.8rem;
  text-align: center;
  vertical-align: middle;
  margin: 0.1rem;
}
.avatar_head img {
  width: 0.8rem;
  height: 0.8rem;
  max-width: 100%;
  max-height: 100%;
  border-radius: 50%;
}
/* 资料 */
.infoDiv .mint-cell{
  border-bottom: 1px solid #e4e4e4;
}
.infoDiv .mint-cell-text {
  font-size: 0.28rem;
  color: #333;
}
.headImg{
  border-radius:40px; 
}
.infoDiv .mint-field-core {
  text-align: right;
}
</style>
